<template>
  <div style="flex:1;" class="flex">
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='search' v-ref:cri>
        <div novalidate class="form-inline" partial>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_userid" placeholder='用户编号'
            condition="f_userid = '{}'" v-next-el='area'  v-el:userinfo
            :size="model.f_userid ? model.f_userid.length * 2 : 4">
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_username" placeholder='用户姓名'
            condition="f_username = '{}'" v-next-el='slice'
            :size="model.f_username ? model.f_username.length * 2 : 4">
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_meternumber" placeholder='表号'
            condition="f_meternumber = '{}'" v-next-el='street' v-el:username
            :size="model.f_meternumber ? model.f_meternumber.length * 2 : 2">
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_cardid" placeholder='卡号'
            condition="f_cardid = '{}'"  v-next-el='residential'  v-el:userphone
            :size="model.f_cardid ? model.f_cardid.length * 2 : 2">
          </div>
          <div class="form-group">
            <input  type="text" class="form-control" v-model="model.f_checker" placeholder='安检人员姓名'
            condition="f_checker = '{}'"  v-next-el='residential'  v-el:userphone
            :size="model.f_checker ? model.f_checker.length * 2 : 8">
          </div>
          <div class="form-group">
            <v-select :value.sync="model.f_area" v-model="model.f_area" condition="f_area like '%{}%'"
                :options='$parent.$parent.f_area' placeholder='区域选择' @change="$parent.$parent.change(false,true,true)"
            close-on-select></v-select>
          </div>
          <div class="form-group">
            <v-select :value.sync="model.f_street" v-model="model.f_street" condition="f_street like '%{}%'"
                :options='$parent.$parent.f_street' placeholder='路段选择' @change="$parent.$parent.change(false,false,true)"
            close-on-select></v-select>
          </div>
          <div class="form-group">
            <v-select :value.sync="model.f_road" v-model="model.f_road" condition="f_road like '%{}%'"
                :options='$parent.$parent.f_road' placeholder='街道选择' close-on-select></v-select>
          </div>
          <div class="form-group">
            <datepicker
              :value.sync="model.f_start_date"
              placeholder='开始时间'
              :disabled-days-of-week="[]"
              :format="'yyyy-MM-dd HH:mm:ss'"
              :show-rest-button="reset"
              v-model="model.f_start_date"
              condition="f_check_date >= '{}'">
            </datepicker>
          </div>
          <div class="form-group">
            <datepicker
              :value.sync="model.f_end_date"
              placeholder='结束时间'
              :disabled-days-of-week="[]"
              :format="'yyyy-MM-dd HH:mm:ss'"
              :show-rest-button="reset"
              v-model="model.f_end_date"
              condition="f_check_date <= '{}'">
            </datepicker>
          </div>
          <div class="form-group">
              <input  type="text" class="form-control" v-model="model.f_address" placeholder='地址'
              condition="f_address like '%{}%'" v-next-el='building' v-el:meternumber
              :size="model.f_address ? model.f_address.length * 2 : 2">
          </div>
          <div class="form-group">
            <button class="btn btn-success width-80" @click="search()" v-el:cx>查询</button>
          </div>
        </div>
       </criteria>
      <data-grid :model="model" partial='list' v-ref:grid>
        <template partial='head'>
          <tr>
             <th>序号</th>
             <th>户号</th>
			       <th>姓名</th>
             <th>表号</th>
             <th>用户类型</th>
             <th>安检日期</th>
             <th>地址</th>
             <th>查询</th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;">{{$index+1}}</td>
          <td style="text-align: center;">{{row.f_userid}}</td>
          <td style="text-align: center;">{{row.f_username}}</td>
          <td style="text-align: center;">{{row.f_meternumber}}</td>
          <td style="text-align: center;">{{row.f_usertype}}</td>
          <td style="text-align: center;">{{row.f_check_date}}</td>
          <td style="text-align: center;">{{row.f_address}}</td>
          <td style="text-align: center;">
            <button type="button" data-toggle="dropdown" style="border: 0px;background: none;"
            @click="$goto('check-msg',{data:row},'self',this.callback)">
                 <span class="glyphicon glyphicon-th-list" style="position: inherit;"></span>
            </button>
          </td>
        </template>
      </data-grid>
 </criteria-paged>
</div>
</template>

<script>
import co from 'co'
import Vue from 'vue'
import { PagedList } from 'vue-client'
import * as Util from '../Util'
// import * as AppData from './AppData'
// import AppData from '../../stores/AppData'

export default {
  title: '安检计划',
  data () {
    return {
      model: new PagedList('rs/sql/getcheckplan', 50, {}),
      f_area:[],
      f_street: [{label:'全部',value: ''}],
      f_road: [{label:'全部',value: ''}],
    }
  },
  props: {

  },
  watch:{
    model:{
        handler:function (val,oldVal) {
          console.log('123456');
            this.model.f_area = (this.model.f_area&&this.model.f_area!=='null'&& this.model.f_area!==null ) ?[this.model.f_area]:['']
            this.model.f_street = (this.model.f_street&&this.model.f_street!=='null'&& this.model.f_street!==null) ?[this.model.f_street]:['']
            this.model.f_road = (this.model.f_road&&this.model.f_road!=='null'&& this.model.f_road!==null) ?[this.model.f_road]:['']
        },
        deep:true
    },
    'model.model.f_area' (val,oldVal) {
          this.model.model.f_street = ['']
          this.model.model.f_road = ['']
        },
    'model.model.f_street' (val,oldVal) {
              this.model.model.f_road = ['']
            },
  },
  ready () {
    this.model.f_area = (this.model.f_area&&this.model.f_area!=='null'&& this.model.f_area!==null ) ?[this.model.f_area]:['']
    this.model.f_street = (this.model.f_street&&this.model.f_street!=='null'&& this.model.f_street!==null) ?[this.model.f_street]:['']
    this.model.f_road = (this.model.f_road&&this.model.f_road!=='null'&& this.model.f_road!==null) ?[this.model.f_road]:['']
    this.change(true)
    //this.search()
  },
  methods: {
    search () {
      this.$refs.paged.$refs.cri.search()
    },
    change(flag,param,sign) {
      if (flag) {
        console.log('1111111111111111111111')
        // this.$post( Vue.url +'sql/params',{data: {key: 'f_area',condition: `1=1`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
        this.$post('rs/sql/params',{data: {key: 'f_area',condition: `1=1`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
        .then((res)=>{
          this.f_area = res.data

          console.log(JSON.stringify(this.f_area));
          // this.$post(Vue.url + 'sql/ppparams',{data: {key: 'f_pinpai',condition: `1=1`,tablename:`t_qibiao`}},{ resolveMsg: null, rejectMsg: null })
        })

      } else {
        if (sign) {
          console.log('222222222222222');
          if (param) {
            console.log('3333333333333');
            console.log(  this.$refs.paged.$refs.cri.model.f_area[0]);
            // this.$post( Vue.url +'sql/params',{data: {key: 'f_area',condition: `1=1`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
            this.$post('rs/sql/params',{data: {key: 'f_street',condition: `f_area = '${ this.$refs.paged.$refs.cri.model.f_area[0]}'`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
            .then((res)=>{
              this.f_street = res.data
            })
          }else {
            console.log('444444444444444');
            // this.$post( Vue.url +'sql/params',{data: {key: 'f_area',condition: `1=1`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
            this.$post( 'rs/sql/params',{data: {key: 'f_area_address',condition: `f_street = '${ this.$refs.paged.$refs.cri.model.f_street[0]}'`,tablename:`t_area`}},{ resolveMsg: null, rejectMsg: null })
            .then((res)=>{
              this.f_road = res.data
            })
          }
        }
      }
  }
  }
}
</script>
<style media="screen">
  .divtext {
    min-width: 50px;
    max-width: 200px;
    border: 1px solid green;
    display: inline-block;
  }
</style>
